{% extends 'base.html' %}
{% block title %}
专题-{{ topic.name }}
{% endblock %}

{% block head %}

{% endblock %}

{% block content %}

<div class="row">
    {% for blog in blogs %}
        <div class="col-sm-6 col-md-6" >
            <div class="media"
                 style="height: 100px; display: flex; border: 1px solid #ddd; border-radius: 0px;
                        padding: 10px; margin-bottom: 15px; background-color: white;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex-direction: row;">
                <div class="media-left" style="flex-shrink: 0;">
                    <img class="media-object"
                         src="{{ url_for('static', filename=blog.picture) if blog.picture else url_for('static', filename='images/1.jpg') }}"
                         alt="{{ blog.name }}"
                         style="width:  70px; height:  70px; object-fit: cover; border-radius: 0px;">
                </div>
                <div class="media-body" style="padding-left: 10px; display: flex; flex-direction: column; justify-content: flex-start;">
                    <a class="media-heading" style="color: #337ab7; margin-top: 0;font-size: 18px" href="{{ url_for('blog.detail',blog_id=blog.id) }}">{{ blog.title }}</a>
                    <p style="font-size: 12px; color: #666;">{{ (blog.content or '')[:10] }}</p>
                    <p style="font-size: 12px">{{ blog.author.username }} | {% for tag in blog.tags %}{{ tag.name}} {% endfor %}</p>

                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}